<template>
  <el-dialog
    title="部门列表"
    :visible="unitDialogVisitable"
    @close="closeDialog"
    center
    width="70%"
  >
    <div>
      <el-tag style="margin: 5px"
              v-for="tag in selectedUnitList"
              :key="tag.unitId"
              closable
              @close="handleClose(tag.unitId)"
      >
        {{tag.unitName}}
      </el-tag>
      <el-input
        placeholder="输入部门名称进行过滤"
        v-model="filterText">
      </el-input>

      <el-tree
        class="filter-tree"
        :data="treeData"
        show-checkbox
        node-key="unitId"
        highlight-current
        :check-strictly="true"
        :props="defaultProps"
        :filter-node-method="filterNode"
        ref="unitTree"
        @check="checkCallBack"
      >
      </el-tree>
      <el-tag style="margin: 5px"
              v-for="tag in selectedUnitList"
              :key="tag.unitId"
              closable
              @close="handleClose(tag.unitId)"
      >
        {{tag.unitName}}
      </el-tag>
    </div>

    <div slot="footer" class="dialog-footer" center>
      <el-button @click="unitDialogVisitable = false">取 消</el-button>
      <el-button type="primary" v-on:click="choseUnit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "ChoseUnit",
    data: function () {
      return {
        filterText: '',
        treeData: [
          {
            unitId:'2019001',
            unitName:'信息技术中心',
            children:[
              {
                unitId:'2019002',
                unitName:'产品部'
              },
              {
                unitId:'2019003',
                unitName:'开发部'
              },
              {
                unitId:'2019004',
                unitName:'测试部'
              },
              {
                unitId:'2019005',
                unitName:'运维部'
              }
            ]
          }
        ],
        selectedUnitList: [],
        defaultProps: {
          children: 'children',
          label: 'unitName'
        },
        unitDialogVisitable: false
      }
    },
    watch: {
      filterText(val) {
        this.$refs.unitTree.filter(val);
      }
    },
    methods: {
      changeVisiable: function () {
        this.unitDialogVisitable = !this.unitDialogVisitable
      },
      closeDialog: function () {
        this.unitDialogVisitable = false
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.unitName.indexOf(value) !== -1;
      },
      choseUnit: function () {
        if (this.selectedUnitList.length === 0) {
          this.$message('请选择部门');
          return;

        }
        //回调父组件接口
        this.$emit('unit-choice', this.selectedUnitList);
        this.selectedUnitList = [];
        this.$refs.unitTree.setCheckedKeys([]);
        //关闭modal
        this.changeVisiable();
      },
      checkCallBack: function (data, checkNodes) {
        this.selectedUnitList = checkNodes.checkedNodes;
      },
      handleClose(key) {
        //去掉选中状态
        this.$refs.unitTree.setChecked(key, false);
        var index = -1;
        for (var i = 0; i < this.selectedUnitList.length; i++) {
          if (this.selectedUnitList[i].unitId === key) {
            index = i;
          }
        }
        if (index > -1) {
          this.selectedUnitList.splice(index, 1);
        }
      }
    },
  }
</script>

<style scoped>

</style>
